<script setup lang="ts">
import { computed } from "vue";

const {
  columnNum = 4,
  space = 0,
  iconSize = 72,
} = defineProps<{
  list: { icon: string; title: string }[];
  space?: number;
  columnNum?: number;
  iconSize?: number;
}>();

const styleSheet = computed(() => {
  return {
    flexBasis: 100 / columnNum + "%",
  };
});
</script>

<template>
  <view class="flex flex-wrap" :style="{ marginLeft: `-${space}rpx` }">
    <template v-for="(item, index) in list" :key="index">
      <view
        class="text-center border-r-1 border-b-1"
        :class="[
          (space > 0 || (space == 0 && index < columnNum)) && 'border-t-1',
        ]"
        :style="[
          styleSheet,
          { paddingLeft: `${space}rpx` },
          index + 1 > columnNum && { marginTop: `${space}rpx` },
        ]"
      >
        <view class="py-2 px-1">
          <image
            :src="item.icon"
            :style="{ width: `${iconSize}rpx`, height: `${iconSize}rpx` }"
          />
          <view class="mt-1">{{ item.title }}</view>
        </view>
      </view>
    </template>
  </view>
</template>
